<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>learnCanvas</title>
    <style>
        body {
            background-color: #ccc;
        }

        canvas {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <canvas width="500" height="500"></canvas>
    <img src="" alt="" id='oimg'>
    <a href="" id="downImg" download="canvas.png">下载图片</a>
    <script>
        var c = document.getElementsByTagName('canvas')[0];
        var ctx = c.getContext("2d");
        ctx.fillStyle = 'orange';
        // ctx.fillRect(100, 100, 100, 100);
        ctx.strokeStyle = 'black';
        // ctx.strokeRect(200, 200, 100, 100);


        // ctx.beginPath();
        // ctx.fillStyle = 'yellow';
        // ctx.strokeStyle = "green";
        // ctx.moveTo(100, 20);
        // ctx.lineTo(200, 50);
        // ctx.lineTo(100, 70);
        // ctx.stroke();
        // ctx.closePath();
        // ctx.stroke();
        // ctx.fill();
        // ctx.clearRect(0, 0, c.width, c.height);

        // ctx.beginPath();
        // ctx.fillRect(100, 100, 100, 100);
        // canvas中旋转
        // ctx.rotate(Math.PI / 180 * 45);
        // canvas中位移
        // ctx.translate(100, 100);
        // canvas中缩放
        // ctx.scale(2, 2);
        // ctx.rect(100, 100, 100, 100);
        // ctx.stroke();
        // ctx.fill();
        // ctx.clearRect(0, 0, c.width, c.height);



        // canvas做动画
        // var left = 100;
        // function next() {
        //     ctx.clearRect(0, 0, c.width, c.height);
        //     ctx.strokeRect(left, 100, 100, 100);
        //     left += 10;
        //     if (left >= 400) {
        //         left = 100;
        //     }
        //     // 递归调用requestAnimationFrame()
        //     requestAnimationFrame(next);
        // }
        // requestAnimationFrame(next);



        // canvas事件
        // var l = 100, t = 100;
        // var r = l + 200, b = t + 200;
        // ctx.strokeRect(l, t, 200, 200);
        // c.onmousemove = function (e) {
        //     var x = e.clientX - c.offsetLeft;
        //     var y = e.clientY - c.offsetTop;
        //     if (x > l && x < r && y > t && y < b) {
        //         ctx.strokeStyle = 'red';
        //     } else {
        //         ctx.strokeStyle = 'orange';
        //     }
        //     ctx.clearRect(0, 0, c.width, c.height);
        //     ctx.strokeRect(l, t, 200, 200);
        // }

        // 画弧
        // 角度转弧度
        function d2a(n) {
            return n * Math.PI / 180;
        }
        // var cx = 200, cy = 200, r = 100;
        // ctx.beginPath();
        // ctx.arc(cx, cy, r, d2a(0), d2a(360));
        // ctx.stroke();

        // c.onmousemove = function (e) {
        //     var x = e.clientX - c.offsetLeft;
        //     var y = e.clientY - c.offsetTop;
        //     var dis = Math.sqrt(Math.pow(cx - x, 2) + Math.pow(cy - y, 2));
        //     if (dis < r) {
        //         ctx.strokeStyle = "red";
        //     } else {
        //         ctx.strokeStyle = 'orange';
        //     }
        //     ctx.clearRect(0, 0, c.width, c.height);
        //     ctx.beginPath();
        //     ctx.lineWidth = 5;//线的粗细（内外都扩张）
        //     ctx.arc(cx, cy, r, d2a(0), d2a(360));
        //     ctx.stroke();
        //     // **添加文字
        //     ctx.font = '28px 微软雅黑';
        //     ctx.fillStyle = 'black';
        //     ctx.fillText('罗建明', 160, 210);
        // }

        // ctx.moveTo(100, 100);
        // ctx.lineTo(200, 200);
        // ctx.stroke();
        // 保存旋转前状态
        // ctx.save();
        // 旋转30度
        // ctx.rotate(d2a(30));
        // 恢复旋转前状态
        // ctx.restore();
        // ctx.beginPath();
        // ctx.moveTo(100, 150);
        // ctx.lineTo(200, 250);
        // ctx.stroke();

        // 画饼图
        // var cx = 200;
        // var cy = 200;
        // var r = 100;
        // var sum = 0;
        // var deg = 0;
        // var datas = [
        //     { gender: 'male', num: 300, color: 'blue' },
        //     { gender: 'female', num: 200, color: 'red' },
        //     { gender: 'unknown', num: 50, color: 'pink' },
        // ];

        // datas.forEach((items) => {
        //     sum += items.num;
        // })
        // datas.forEach((items) => {
        //     drawCake(deg, deg + 360 / sum * items.num, items.color, items.gender);
        //     deg += 360 / sum * items.num;
        // })
        // function drawCake(startDeg, endDeg, color, text) {
        //     ctx.beginPath();
        //     ctx.moveTo(cx, cy);
        //     ctx.arc(cx, cy, r, d2a(startDeg), d2a(endDeg));
        //     ctx.fillStyle = color;
        //     ctx.fill();
        //     var x = cx + Math.cos(d2a(startDeg + (endDeg - startDeg) / 2)) * r / 2;
        //     var y = cy + Math.sin(d2a(startDeg + (endDeg - startDeg) / 2)) * r / 2;
        //     ctx.fillStyle = "#000";
        //     ctx.font = '12px 微软雅黑';
        //     ctx.fillText(text + " " + Math.round((endDeg - startDeg) / 360 * 100) + "%", x, y);
        // }



        c.onmousedown = function (e) {
            ctx.moveTo(e.clientX - c.offsetLeft, e.clientY - c.offsetTop);
            c.onmousemove = function (e) {
                ctx.lineTo(e.clientX - c.offsetLeft, e.clientY - c.offsetTop);
                ctx.stroke();
            }
        }
        c.onmouseup = function () {
            c.onmousemove = null;
            var res = c.toDataURL();
            window.oimg.src = res;
            window.downImg.href = res;
        }

        //   canvas图片展现与下载
        // var res = c.toDataURL();
        // window.oimg.src = res;
        // window.downImg.href = res;

    </script>
</body>

</html>